<template>
  <div id="moneyhome">
    <TopBar/>
    <div class="heihei">
      <Derdge />
      <!-- 权益中心 -->
      <div class="equity">
        <h2>权益中心</h2>
        <span>更多 &nbsp;></span>
      </div>
      <!-- 我的积分 -->
      <div class="integral">
        <div class="integral-a">
          <span>- -</span>
          <p>我的积分</p>
        </div>
        <div class="integral-a">
          <span>- -</span>
          <p>我的卡券</p>
        </div>
        <div class="integral-a">
          <span>- -</span>
          <p>信用卡权益</p>
        </div>
        <div class="integral-a">
          <span>- -</span>
          <p>已报名活动</p>
        </div>
      </div>
      <!-- 精选服务 -->
      <div class="sift">
        <span class="sift-span">精选服务</span>
        <div class="sift-a">
          <div class="integral-a" @click="fun()">
            <span class="iconfont green">&#xe65d;</span>
            <p>一件绑卡</p>
          </div>
          <div class="integral-a">
            <span class="iconfont blue">&#xe607;</span>
            <p>微应用</p>
          </div>
          <div class="integral-a" @click="funb()">
            <span class="iconfont green">&#xe8ab;</span>
            <p>安全中心</p>
          </div>
          <div class="integral-a">
            <span class="iconfont red">&#xe8af;</span>
            <p>发现</p>
          </div>
        </div>
      </div>
      <!-- 安全验证 -->
      <div class="accredit">
        <span class="accredit-span">安全验证</span>
        <div class="accredit-a">
          <div class="integral-a" @click="funa()">
            <span class="iconfont blue">&#xe613;</span>
            <p>实名认证</p>
          </div>
          <div class="integral-a">
            <span class="iconfont blue">&#xe76d;</span>
            <p>网证</p>
          </div>
          <div class="integral-a" @click="func()">
            <span class="iconfont red">&#xe662;</span>
            <p>地址管理</p>
          </div>
          <div class="integral-a">
            <span class="iconfont"></span>
            <p></p>
          </div>
        </div>
      </div>
      <!-- 授权管理 -->
      <div class="manage">
        <span class="manage-span">授权管理</span>
        <div class="manage-a">
          <div class="manage-a">
            <span class="iconfont red">&#xe626;</span>
            <p>绑定设备</p>
          </div>
          <div class="manage-a">
            <span class="iconfont blue">&#xe69c;</span>
            <p>快捷支付管理</p>
          </div>
          <div class="manage-a">
            <span class="iconfont green">&#xe685;</span>
            <p>微信绑定</p>
          </div>
          <div class="manage-a">
            <span class="iconfont">&#xe660;</span>
            <p>Apple Pay</p>
          </div>
        </div>
      </div>
    </div>
    <BottomBar />
  </div>
</template>

<script>
import Derdge from "@/components/ayuan/DreDge.vue";
import TopBar from "@/components/TopBar.vue";
import BottomBar from "@/components/BottomBar.vue";
export default {
  components: { TopBar, Derdge , BottomBar},
  methods:{
    fun(){
      this.$router.push("/bing")
    },
    funa(){
      this.$router.push("/auton")
    },
    funb(){
      this.$router.push("/safety")
    },
    func(){
      this.$router.push("/site")
    }
  }
};
</script>

<style lang="scss" scoped>
// body{
//   padding-bottom: .71rem;
// }
.heihei {
  flex: 1;
  width: 100%;
  min-height: 8.04rem;
  overflow: hidden;
  margin-top: .75rem;
}
/*iconfont 图标*/
@font-face {
  font-family: "iconfont";
  src: url("@/assets/iconfont/iconfont.woff2?t=1664011341460") format("woff2"),
    url("@/assets/iconfont/iconfont.woff2?t=1664011341460") format("woff"),
    url("@/assets/iconfont/iconfont.woff2?t=1664011341460") format("truetype");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: .16rem;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
// 权益中心
.equity {
  margin-top: .16rem;
  display: flex;
  justify-content: space-between;
  h2 {
    font-size: .24rem;
    margin-left: .16rem;
  }
  span {
    color: gray;
    margin-top: .08rem;
    margin-right: .16rem;
  }
}
// 我的积分
.integral {
  height: .75rem;
  width: 3.46rem;
  margin: auto;
  display: flex;
  justify-content: space-around;
  background-color: #4187cd;
  border-radius: .1rem;
  margin-top: .16rem;
  .integral-a {
    margin: auto;
    height: .55rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    color: #fff;
    span {
      text-align: center;
    }
  }
}
// 精选服务
.sift {
  margin-top: .22rem;
  border-bottom: .06rem solid #fafafa;
  .sift-span {
    font-size: .24rem;
    margin-left: .16rem;
    font-weight: 700;
  }
  .sift-a {
    height: .75rem;
    width: 3.46rem;
    margin: auto;
    display: flex;
    justify-content: space-around;
    // background-color: #4187cd;
    border-radius: .1rem;
    margin-top: .16rem;
    .integral-a {
      margin: auto;
      height: .55rem;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      span {
        text-align: center;
        font-size: .26rem;
      }
      .green {
        color: #2fb08e;
      }
      .blue {
        color: #236be5;
      }
      .red {
        color: #ea2123;
      }
      p {
        font-size: .14rem;
        font-weight: 700;
      }
    }
  }
}
// 安全验证
.accredit {
  margin-top: .22rem;
  border-bottom: .06rem solid #fafafa;
  .accredit-span {
    font-size: .24rem;
    margin-left: .16rem;
    font-weight: 700;
  }
  .accredit-a {
    height: .75rem;
    width: 3.46rem;
    margin-left: .04rem;
    display: flex;
    justify-content: space-around;
    // background-color: #4187cd;
    border-radius: .1rem;
    margin-top: .16rem;
    .integral-a {
      margin: auto;
      height: .55rem;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      span {
        text-align: center;
        font-size: .26rem;
      }
      .blue {
        color: #236be5;
      }
      .red{
        color: red;
      }
      p {
        font-size: .14rem;
        font-weight: 700;
      }
    }
  }
}
// 授权管理
.manage {
  // z-index: 99999999999999999;
  margin-top: .22rem;
  border-bottom: .06rem solid #fafafa;
  .manage-span {
    font-size: .24rem;
    margin-left: .16rem;
    font-weight: 700;
  }
  .manage-a {
    height: .75rem;
    width: 3.46rem;
    margin: auto;
    display: flex;
    justify-content: space-around;
    // background-color: #4187cd;
    border-radius: .1rem;
    margin-top: .16rem;
    .manage-a {
      margin: auto;
      height: .55rem;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      span {
        text-align: center;
        font-size: .26rem;
      }
      .green {
        color: #2fb08e;
      }
      .blue {
        color: #236be5;
      }
      .red {
        color: #ea2123;
      }
      p {
        font-size: .14rem;
        font-weight: 700;
        text-align: center;
      }
    }
  }
}
</style>